<template>
  <van-popup
    v-model="show"
    round
    safe-area-inset-bottom
    position="bottom"
    :close-on-click-overlay="false"
  >
    <div v-if="isMini" class="canvas-signature-modal_header">
      <div class="canvas-signature-modal_cancel" @click="onCliclCancel">取消</div>
      <div class="canvas-signature-modal_title">手写签名</div>
      <div class="canvas-signature-modal_ok" @click="onClickConfirm">完成</div>
    </div>

    <div
      :class="{
        'canvas-signature-modal_wrapper': true,
        'canvas-signature-modal_wrapper-max': !isMini,
      }"
    >
      <div class="canvas-signature-modal_canvas">
        <i-canvas-signature
          ref="Signature"
          :mode="mode"
          @cancel="onCliclCancel"
          @confirm="onClickConfirm"
        />
      </div>

      <div
        v-if="isMini"
        class="canvas-signature-modal_mini-action canvas-signature-modal_mini-clear"
        @click="onClickClear"
      >
        <van-icon name="replay" />
      </div>

      <div
        v-if="isMini"
        class="canvas-signature-modal_mini-action canvas-signature-modal_mini-max"
        @click="onClickMax"
      >
        <van-icon name="expand-o" />
      </div>
    </div>
  </van-popup>
</template>

<script>
import { Popup, Icon } from 'vant';

import CanvasSignature from './canvas-signature';

export default {
  name: 'CanvasSignatureModal',

  components: {
    'van-popup': Popup,
    'van-icon': Icon,
    'i-canvas-signature': CanvasSignature,
  },

  props: {},

  data() {
    return {
      show: false,
      mode: 'normal',
    };
  },

  computed: {
    /**
     * 是否是小窗模式
     */
    isMini() {
      return this.mode === 'normal';
    },
  },

  methods: {
    /**
     * 显示签名弹窗
     */
    showModal() {
      // 先恢复默认状态，避免莫名其妙的绑定失败
      this.mode = 'normal';
      this.$nextTick(() => {
        this.show = true;
      });
    },

    /**
     * 隐藏签名弹窗
     */
    hideModal() {
      this.show = false;
    },

    clear() {
      this.$refs.Signature.clear();
    },

    /**
     * 点击取消
     */
    onCliclCancel() {
      this.hideModal();
      this.clear();
      this.$emit('cancel');
    },

    /**
     * 点击确定
     */
    onClickConfirm() {
      const image = this.$refs.Signature.getJPGImage();
      const blob = this.$refs.Signature.dataURLtoBlob(image);
      this.$emit('confirm', blob);
      this.clear();
      this.hideModal();
    },

    /**
     * 点击放大
     */
    onClickMax() {
      this.mode = 'max';
    },

    /**
     * 点击清空
     */
    onClickClear() {
      this.clear();
    },
  },
};
</script>

<style lang="less">
@import '~vant/lib/style/var.less';
@import '~@scf/ding-style-less/var.less';

.canvas-signature-modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 @padding-content;
  border-bottom: 1px solid #f2f2f2;
  line-height: 50px;
  font-size: 14px;
}

.canvas-signature-modal_title {
  font-weight: 600;
  color: @color-title;
}

.canvas-signature-modal_cancel {
  color: @color-subtitle;
}

.canvas-signature-modal_ok {
  color: @color-primary;
}

.canvas-signature-modal_wrapper {
  position: relative;
  overflow: hidden;
}

.canvas-signature-modal_wrapper-max {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 299;
  background-color: #fff;
  display: flex;

  .canvas-signature-modal_canvas {
    flex: 1;
    height: auto;
    overflow: hidden;
  }
}

.canvas-signature-modal_canvas {
  margin: @padding-content;
  height: 260px;
  border: 1px dashed #d9d9d9;
}

.canvas-signature-modal_mini-action {
  position: absolute;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 299;
  color: @color-title;
  font-size: 16px;
}

.canvas-signature-modal_mini-clear {
  right: @padding-content * 1.5;
  bottom: @padding-content * 1.5;
}

.canvas-signature-modal_mini-max {
  right: @padding-content * 1.5;
  top: @padding-content * 1.5;
}
</style>
